<template>
  <!-- 商家投诉 -->
  <view class="content" :style="{ paddingTop: statusBarHeight + 'px' }">
    <uni-nav-bar title="商家投诉" fixed :border="false" height="88rpx" background-color="#fff" left-icon="left"
      @clickLeft="onClickLeft"></uni-nav-bar>

    <view class="main">
      <uni-forms ref="customForm" :rules="customRules" :model="customFormData" :label-width="100">
        <view class="row">
          <view class="col">
            <uni-forms-item label="联系电话:" required name="phone">
              <uni-easyinput type="number" v-model="customFormData.phone" placeholder="请输入联系电话" style="width: 100%;"
                adjust-position />
            </uni-forms-item>
          </view>
        </view>
        <view class="row">
          <view class="col">
            <uni-forms-item label="业务领域:" required name="serviceType">
              <uni-data-select v-model="customFormData.serviceType" :localdata="range"></uni-data-select>
            </uni-forms-item>
          </view>
        </view>
        <view class="row">
          <view class="col">
            <uni-forms-item label="优先级:" required name="priorityLevel">
              <uni-data-checkbox mode="tag" v-model="customFormData.priorityLevel"
                :localdata="range1"></uni-data-checkbox>
            </uni-forms-item>
          </view>
        </view>
        <view class="row row1">
          <view class="col">
            <uni-forms-item label="反馈内容:" required name="content">
              <uni-easyinput type="textarea" v-model="customFormData.content" placeholder="请输入反馈内容" style="width: 100%;"
                adjust-position />
            </uni-forms-item>
          </view>
        </view>
      </uni-forms>
      <view class="btnBox" @click="submitForm">
        <text class="btn type-1">提交</text>
      </view>
    </view>
  </view>
</template>

<script>
import { reqComplaintOrder } from '@/apis/member'
export default {
  name: "AutotrophyGoods",
  data() {
    return {
      customFormData: {
        phone: '',
        serviceType: '0',
        priorityLevel: '0',
        content: ''
      },
      customRules: {
        phone: {
          rules: [
            {
              required: true,
              errorMessage: '请输入联系电话',
            },
            {
              validateFunction: function (rule, value, data, callback) {
                const reg = /^(?:(?:\+|00)86)?1(?:(?:3[\d])|(?:4[5-79])|(?:5[0-35-9])|(?:6[5-7])|(?:7[0-8])|(?:8[\d])|(?:9[1589]))\d{8}$/;
                if (!reg.test(value)) {
                  callback('请输入正确的手机号')
                }
                return true
              }
            },
          ],
        },
        serviceType: {
          rules: [
            {
              required: true,
              errorMessage: '请选择业务领域',
            },
          ],
        },
        priorityLevel: {
          rules: [
            {
              required: true,
              errorMessage: '请选择优先级',
            },
          ],
        },
        content: {
          rules: [
            {
              required: true,
              errorMessage: '请输入反馈内容',
            },
          ],
        },
      },
      range: [{
        value: '0',
        text: "系统问题"
      },
      {
        value: '1',
        text: "供应链问题"
      }],
      range1: [{
        value: '0',
        text: "紧急"
      },
      {
        value: '1',
        text: "重要"
      }, {
        value: '2',
        text: "一般"
      }],
    }
  },
  onLoad(params) {
  },
  methods: {
    submitForm() {
      this.$refs.customForm.validate(async (res) => {
        console.log('res', res);
        // return 
        if (!res) {
          let data = {
            ...this.customFormData
          }
          const res = await reqComplaintOrder(data)
          if (res.code == 200) {
            uni.showToast({
              title: '添加成功',
              icon: 'none',
              duration: 1000
            })
            setTimeout(() => {
              uni.navigateBack()
            }, 1000)

          }
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
view {
  box-sizing: border-box;
}

.content {
  height: 100vh;
  background-color: #fff;
}

.main {
  padding: 20rpx;
  height: calc(100% - 88rpx);
  overflow: scroll;
}

.row1 {
  height: 180rpx !important;
}

.row {
  display: flex;
  // align-items: center;
  height: 80rpx;
  line-height: 80rpx;
  margin-bottom: 60rpx;

  .col {
    width: 90%;
  }

  .col2 {
    width: 70%;
    margin-right: 20rpx;
  }
}

.btnBox {

  width: 100%;
  text-align: center;
}

.btn {
  width: 80%;
  // margin: 0 auto;
  display: inline-block;
  height: 88rpx;
  line-height: 88rpx !important;
  text-align: center;
  color: #fff;
  background-color: #ff6600;
  border-radius: 10rpx;
}
</style>
